<template>
  <div class="echarts_box">
    <div
      class="echarts_box"
      ref="echarts_box"
      :style="{ opacity: data.length == 0 ? '0' : '1' }"
    ></div>
    <!---------------------- 无数据是显示 ---------------------->
    <Nodata class="Nodata" v-show="data.length == 0"></Nodata>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
import fontSize from "@/modules/fontSize";
export default {
  props: {
    data: {
      // 返回的数据
      type: Array | Object,
      default: function () {
        return [];
      },
    },
    barLeft: {
      type: Number | String,
      default: "5%",
    },
    itemStyleLabel: {
      type: String,
      default: "value",
    },
    xUnit: {
      type: String,
      default: "单位：标准箱",
    },
    barRight: {
      type: Number | String,
      default: "13%",
    },
    barTop: {
      type: Number | String,
      default: "3%",
    },
    barBottom: {
      type: Number | String,
      default: "2%",
    },
    isIndex: {
      // X轴是否显示下标
      type: Boolean,
      default: false,
    },
    barWidth: {
      // 柱状图宽度
      type: Number | String,
      default: "10",
    },
    isxAxis: {
      type: Boolean,
      default: false,
    },
    isTooltip: {
      type: Boolean,
      default: true,
    },
    tooltipLabel: {
      type: String,
      default: "",
    },
  },
  watch: {
    data: "drawLine",
    barWidth: "drawLine",
    barLeft: "drawLine",
    barRight: "drawLine",
    xUnit: "drawLine",
    isIndex: "drawLine",
    barBottom: "drawLine",
    barTop: "drawLine",
    itemStyleLabel: "drawLine",
    isxAxis: "drawLine",
    isTooltip: "drawLine",
    tooltipLabel: "drawLine",
  },
  data() {
    return {
      temp: 0,
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      try {
        this.$nextTick(() => {
          this.temp = 0;
          var _this = this;
          var myChart = _this.$echarts.init(_this.$refs.echarts_box);
          var xData = [];
          var yData = [];
          for (let item of this.data) {
            xData.push(item.name);
            yData.push(item.value);
          }
          let option = {
            grid: {
              left: this.barLeft,
              right: this.barRight,
              bottom: this.barBottom,
              top: this.barTop,
              containLabel: true,
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "none",
              },
              show: this.isTooltip,
              textStyle: {
                fontSize: fontSize.fontSize(0.082),
              },
              formatter: function (params) {
                return (
                  params[0].name + " : " + params[0].value + this.tooltipLabel
                );
              },
            },
            xAxis: [
              {
                show: this.isxAxis,
                name: this.xUnit,
                nameTextStyle: {
                  color: "#d4f0ff",
                  align: "left",
                  verticalAlign: "middle",
                  padding: [25, 0, 0, -3],
                  fontSize: fontSize.fontSize(0.082),
                },
                splitLine: {
                  show: true,
                  textStyle: {
                    color: "#d4f0ff",
                  },
                  lineStyle: {
                    color: "rgba(95,200,225,0.35)",
                    type: "dashed",
                  },
                },
                axisLine: {
                  show: false,
                  textStyle: {
                    color: "#d4f0ff",
                  },
                  lineStyle: {
                    color: "#8c8c8c",
                    type: "dashed",
                  },
                },
                axisTick: {
                  show: false,
                },
                axisLabel: {
                  show: true,
                  textStyle: {
                    color: "#d4f0ff",
                    fontSize: fontSize.fontSize(0.082),
                  },
                },
                type: "value",
              },
            ],
            yAxis: [
              {
                type: "category",
                inverse: true,
                boundaryGap: true,
                axisLabel: {
                  show: true,
                  lineStyle: {
                    color: "#d4f0ff",
                  },
                  textStyle: {
                    color: "#ffffff",
                    fontSize: fontSize.fontSize(0.082),
                  },
                },
                splitLine: {
                  show: false,
                },
                axisTick: {
                  show: false,
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "#5fc8e1",
                    type: "solid",
                  },
                },
                data: xData,
              },
            ],
            series: [
              {
                // name: '值',
                type: "bar",
                zlevel: 1,

                itemStyle: {
                  normal: {
                    label: {
                      show: true, //开启显示
                      position: "right", //在上方显示 insideRight /top /right
                      textStyle: {
                        //数值样式
                        color: "#FFFFFF",
                        fontSize: fontSize.fontSize(0.08),
                        fontWeight: 600,
                      },
                      formatter: (params) => {
                        return this.data[params.dataIndex][this.itemStyleLabel];
                      },
                    },
                    barBorderRadius: [0, 10, 10, 0],
                    color: new _this.$echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        {
                          offset: 0,
                          color: "rgba(54,128,226,1)",
                        },
                        {
                          offset: 1,
                          color: "rgba(10,233,255,1)",
                        },
                      ]
                    ),
                  },
                },
                barWidth: this.barWidth,
                data: yData,
              },
            ],
          };
          myChart.setOption(option);
          myChart.off("click");
          /* 点击事件 */
          myChart.on("click", (params) => {
            this.$emit("xRowEcharts", params);
          });
          /* 大小自适应 */
          window.addEventListener("resize", function () {
            myChart.resize();
          });
          myChart.resize();
        });
      } catch (e) {
        console.log(e);
        // 错误处理代码片段
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts_box {
  width: 100%;
  height: 100%;
  position: relative;
  .Nodata {
    position: absolute;
    top: 0;
    z-index: 10;
  }
}
</style>
